<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>音乐页面</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "Microsoft Yahei", sans-serif;
    }
    body {
      background-color: #f5f5f5;
    }
    .container {
      width: 1200px;
      margin: 0 auto;
    }
    h2 {
      text-align: center;
      font-size: 24px;
      margin: 20px 0;
      color: #333;
    }
    .tab {
      display: flex;
      justify-content: center;
      margin-bottom: 20px;
    }
    .tab a {
      text-decoration: none;
      color: #666;
      margin: 0 10px;
      font-size: 14px;
      transition: color 0.3s ease;
    }
    .tab a:hover {
      color: #00c3ff;
    }
    .tab a.active {
      color: #00c3ff;
    }
    .list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    .item {
      width: 19%;
      margin-bottom: 20px;
      transition: transform 0.3s ease;
    }
    .item:hover {
      transform: translateY(-5px);
    }
    .item img {
      width: 100%;
      height: auto;
      border-radius: 4px;
      transition: opacity 0.3s ease;
    }
    .item:hover img {
      opacity: 0.8;
    }
    .item p {
      text-align: center;
      font-size: 14px;
      color: #666;
      margin-top: 10px;
    }
    .song-list, .mv-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-bottom: 20px;
    }
    .song-item, .mv-item {
      width: 32%;
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      transition: transform 0.3s ease;
    }
    .song-item:hover, .mv-item:hover {
      transform: translateX(5px);
    }
    .song-item img, .mv-item img {
      width: 80px;
      height: 80px;
      margin-right: 10px;
      border-radius: 4px;
      transition: opacity 0.3s ease;
    }
    .song-item:hover img, .mv-item:hover img {
      opacity: 0.8;
    }
    .song-info, .mv-info {
      flex: 1;
    }
    .song-info p, .mv-info p {
      text-align: left;
      margin: 5px 0;
    }
    .song-info .title, .mv-info .title {
      font-size: 16px;
      color: #333;
      transition: color 0.3s ease;
    }
    .song-info .title:hover, .mv-info .title:hover {
      color: #00c3ff;
    }
    .song-info .artist, .mv-info .play-count {
      font-size: 12px;
      color: #999;
    }
    .duration, .mv-item .play-count {
      font-size: 14px;
      color: #666;
    }
    .play-all {
      text-align: left;
      margin-bottom: 15px;
    }
    .play-all button {
      background-color: #00c3ff;
      color: #fff;
      border: none;
      padding: 6px 15px;
      border-radius: 20px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }
    .play-all button:hover {
      background-color: #00a8e8;
    }
  </style>
</head>
<body>
  <div class="container">
    <!-- 歌单推荐部分 -->
    <h2>歌单推荐</h2>
    <div class="tab">
      <a href="#" class="active">为你推荐</a>
      <a href="#">运动</a>
      <a href="#">网络歌曲</a>
      <a href="#">思念</a>
      <a href="#">官方歌单</a>
      <a href="#">情歌</a>
    </div>
    <div class="list">
      <div class="item">
        <img src="https://picsum.photos/200/200?random=1" alt="歌单封面">
        <p>翻唱女神J.Fla | 只唱你最爱的旋律</p>
        <p>播放量：891.4万</p>
      </div>
      <div class="item">
        <img src="https://picsum.photos/200/200?random=2" alt="歌单封面">
        <p>古风女声控，优美旋律为你而来</p>
        <p>播放量：171.2万</p>
      </div>
      <div class="item">
        <img src="https://picsum.photos/200/200?random=3" alt="歌单封面">
        <p>想开一家早稻店，却叩点点窗露</p>
        <p>播放量：62.6万</p>
      </div>
      <div class="item">
        <img src="https://picsum.photos/200/200?random=4" alt="歌单封面">
        <p>好评999+ 英文歌！轻松解压100%</p>
        <p>播放量：1239.0万</p>
      </div>
      <div class="item">
        <img src="https://picsum.photos/200/200?random=5" alt="歌单封面">
        <p>书房音乐 | 沉淀于字里行间的时光</p>
        <p>播放量：303.3万</p>
      </div>
    </div>

    <!-- 新歌首发部分 -->
    <h2>新歌首发</h2>
    <div class="play-all">
      <button>播放全部</button>
    </div>
    <div class="tab">
      <a href="#" class="active">最新</a>
      <a href="#">内地</a>
      <a href="#">港台</a>
      <a href="#">欧美</a>
      <a href="#">韩国</a>
      <a href="#">日本</a>
    </div>
    <div class="song-list">
      <div class="song-item">
        <img src="https://picsum.photos/80/80?random=6" alt="歌曲封面">
        <div class="song-info">
          <p class="title">Sabotage</p>
          <p class="artist">Bebe Rexha</p>
        </div>
        <div class="duration">02:56</div>
      </div>
      <div class="song-item">
        <img src="https://picsum.photos/80/80?random=7" alt="歌曲封面">
        <div class="song-info">
          <p class="title">如果人人爱音乐</p>
          <p class="artist">张蔷</p>
        </div>
        <div class="duration">03:46</div>
      </div>
      <div class="song-item">
        <img src="https://picsum.photos/80/80?random=8" alt="歌曲封面">
        <div class="song-info">
          <p class="title">你就不要想起我</p>
          <p class="artist">R1SE-赵磊</p>
        </div>
        <div class="duration">04:30</div>
      </div>
      <div class="song-item">
        <img src="https://picsum.photos/80/80?random=9" alt="歌曲封面">
        <div class="song-info">
          <p class="title">软肋</p>
          <p class="artist">李宇春</p>
        </div>
        <div class="duration">04:17</div>
      </div>
      <div class="song-item">
        <img src="https://picsum.photos/80/80?random=10" alt="歌曲封面">
        <div class="song-info">
          <p class="title">一爱如故《长歌行》电视剧插曲</p>
          <p class="artist">摩登兄弟刘宇宁</p>
        </div>
        <div class="duration">03:55</div>
      </div>
      <div class="song-item">
        <img src="https://picsum.photos/80/80?random=11" alt="歌曲封面">
        <div class="song-info">
          <p class="title">向宿命挥拳的人《新斗罗大陆》</p>
          <p class="artist">阿云嘎</p>
        </div>
        <div class="duration">04:00</div>
      </div>
      <div class="song-item">
        <img src="https://picsum.photos/80/80?random=12" alt="歌曲封面">
        <div class="song-info">
          <p class="title">花好月圆</p>
          <p class="artist">周迅</p>
        </div>
        <div class="duration">02:34</div>
      </div>
      <div class="song-item">
        <img src="https://picsum.photos/80/80?random=13" alt="歌曲封面">
        <div class="song-info">
          <p class="title">Renegades《惊奇少女》主题曲</p>
          <p class="artist">ONE OK ROCK（ワンオクロック）</p>
        </div>
        <div class="duration">04:04</div>
      </div>
      <div class="song-item">
        <img src="https://picsum.photos/80/80?random=14" alt="歌曲封面">
        <div class="song-info">
          <p class="title">驯化者</p>
          <p class="artist">陈俊豪 / 杨智翔 / TGM - 姜...</p>
        </div>
        <div class="duration">03:28</div>
      </div>
    </div>

    <!-- MV部分 -->
    <h2>MV</h2>
    <div class="tab">
      <a href="#" class="active">精选</a>
      <a href="#">内地</a>
      <a href="#">韩国</a>
      <a href="#">港台</a>
      <a href="#">欧美</a>
      <a href="#">日本</a>
    </div>
    <div class="mv-list">
      <div class="mv-item">
        <img src="https://picsum.photos/200/120?random=15" alt="MV封面">
        <div class="mv-info">
          <p class="title">向宿命挥拳的人《新斗罗大陆》</p>
          <p class="play-count">8002</p>
        </div>
      </div>
      <div class="mv-item">
        <img src="https://picsum.photos/200/120?random=16" alt="MV封面">
        <div class="mv-info">
          <p class="title">雨</p>
          <p class="play-count">3334</p>
        </div>
      </div>
      <div class="mv-item">
        <img src="https://picsum.photos/200/120?random=17" alt="MV封面">
        <div class="mv-info">
          <p class="title">一爱如故《长歌行》电视剧插曲</p>
          <p class="play-count">4.2万</p>
        </div>
      </div>
      <div class="mv-item">
        <img src="https://picsum.photos/200/120?random=18" alt="MV封面">
        <div class="mv-info">
          <p class="title">我很好骗</p>
          <p class="play-count">1.1万</p>
        </div>
      </div>
      <div class="mv-item">
        <img src="https://picsum.photos/200/120?random=19" alt="MV封面">
        <div class="mv-info">
          <p class="title">追梦时学会飞行《声梦传奇》主...</p>
          <p class="play-count">1483</p>
        </div>
      </div>
      <div class="mv-item">
        <img src="https://picsum.photos/200/120?random=20" alt="MV封面">
        <div class="mv-info">
          <p class="title">What's Wrong With Me (Punk V...</p>
          <p class="play-count">20.2万</p>
        </div>
      </div>
      <div class="mv-item">
        <img src="https://picsum.photos/200/120?random=21" alt="MV封面">
        <div class="mv-info">
          <p class="title">Let's Party《和平精英》2周年庆...</p>
          <p class="play-count">8.5万</p>
        </div>
      </div>
      <div class="mv-item">
        <img src="https://picsum.photos/200/120?random=22" alt="MV封面">
        <div class="mv-info">
          <p class="title">桜の羽根</p>
          <p class="play-count">2801</p>
        </div>
      </div>
      <div class="mv-item">
        <img src="https://picsum.photos/200/120?random=23" alt="MV封面">
        <div class="mv-info">
          <p class="title">여름로그 (epilogue)</p>
          <p class="play-count">7995</p>
        </div>
      </div>
      <div class="mv-item">
        <img src="https://picsum.photos/200/120?random=24" alt="MV封面">
        <div class="mv-info">
          <p class="title">重要 (Coffee) MV</p>
          <p class="play-count">1.5万</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>